<template>
  <div id="app">
    <div class="action">
      <div class="search">
        <div class="SearchInput">
          <el-input
            v-model="searchval"
            placeholder="请输入角色名称"
            class="el-input"
            clearable
          ></el-input>
        </div>
        <el-button
          type="primary"
          icon="el-icon-search"
          class="searchlogo"
          @click="searchvalue"
          >查找</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-edit"
          class="addlogo"
          @click="dialog"
          >添加</el-button
        >
      </div>
      <!-- 编辑&删除&授权 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="角色名称" align="center" sortable>
        </el-table-column>
        <el-table-column prop="desc" label="说明" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              class="editor"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              class="editor"
              @click="handleauthorization(scope.$index, scope.row)"
              >授权</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加dialog -->
      <el-dialog
        :title="bools ? '创建' : '编辑'"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-form-item
            prop="name"
            label="角色名称"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.name"
              autocomplete="off"
              class="DialogInput"
            ></el-input>
          </el-form-item>
          <el-form-item prop="msg" label="说明" :label-width="formLabelWidth">
            <el-input
              v-model="form.msg"
              autocomplete="off"
              class="DialogInput"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clean('form')">取 消</el-button>
          <el-button type="primary" @click="addlist('form')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 授权dialog -->
      <el-dialog title="授权" :visible.sync="diagrantFormVisible">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          ref="tse"
          :default-checked-keys="assignedPermissions"
          :props="defaultProps"
        >
          <span slot-scope="{ data }">
            <span>{{ data.label }}</span
            ><span :class="data.api === undefined ? '' : 'apival'">{{
              data.api
            }}</span>
          </span>
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="diagrantFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="getCheckedKeys">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  roleList,
  submitForma,
  submitFormas,
  handleDeletes,
  handleGrants,
  getCheckedKeysa,
} from "../encapsulation/api";
// import http from "../encapsulation/http.js";
export default {
  data() {
    return {
      //修改权限
      modifyList: [],
      // 点击隐藏添加对话框
      dialogFormVisible: false,
      // 点击授权对话框
      diagrantFormVisible: false, //授权
      // 搜素的时候输入框的值
      searchval: "",
      //角色id
      id: "",
      // 弹框的内容
      form: {
        name: "",
        msg: "",
      },
      // 非空验证的提示
      rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        msg: [{ required: true, message: "请输入说明", trigger: "blur" }],
      },
      formLabelWidth: "120px",
      // input输入框
      input: "",
      // 默认页数
      pageNo: 1,
      // 页面条数
      pageSize: 20,
      // 总共条数
      total: 0,
      // 渲染数据的table表单
      tableData: [],
      //权限默认选择
      assignedPermissions: [],
      // 插槽绑定
      data: [],
      // 搜素名称
      user: "",
      // 授权
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 判断弹框的布尔值
      bools: true,
    };
  },
  methods: {
    // 获取角色列表
    getlist() {
      let roleLister = {
        name: this.searchval,
        page: this.pageNo,
        limit: this.pageSize,
      };
      roleList(roleLister).then((res) => {
        this.tableData = res.data.data.items;
        this.pageNo = res.data.data.pageNo;
        this.pageSize = res.data.data.pageSize;
        this.total = res.data.data.total;
      });
    },
    // 添加点击清空
    // 取消
    clean(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    // 添加&编辑
    addlist(form) {
      let _this = this;
      if (_this.bools) {
        // 点击添加
        _this.$refs[form].validate((valid) => {
          if (valid) {
            let data = {
              role: JSON.stringify({
                name: _this.form.name,
                desc: _this.form.msg,
              }),
            };
            submitForma(data).then((res) => {
              if (res.data.errmsg === "系统未知异常") {
                _this.$message.error("角色已存在！");
              }
              if (res.data.errmsg === "成功") {
                (_this.dialogFormVisible = false);
                _this.$message.success({
                  message: "添加成功",
                });
                _this.getlist();
              }
              _this.$refs[form].resetFields();
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        // 编辑
        let data = {
          role: JSON.stringify({
            name: _this.form.name,
            desc: _this.form.msg,
            id: _this.id,
          }),
        };
        submitFormas(data).then(() => {
          _this.$message.success({
            message: "更新成功",
          });
          _this.getlist();
          _this.dialogFormVisible = false;
          _this.$refs[form].resetFields();
        });
      }
    },
    // 点击查找
    searchvalue() {
      (this.pageNo = 1), (this.pageSize = 20), this.getlist();
    },
    // 添加弹框
    dialog() {
      this.dialogFormVisible = true;
      this.bools = true;
      this.form.name = "";
      this.form.msg = "";
    },
    // 编辑弹框
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.bools = false;
      this.id = row.id;
      this.form.name = row.name;
      this.form.msg = row.desc;
    },
    // 删除
    handleDelete(index, row) {
      let _this = this;
      let data = {
        roleId: row.id,
      };
      _this
        .$confirm(
          "此操作将永久删除该角色---" + row.name + "---, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(() => {
          handleDeletes(data).then(() => {
            _this.tableData.splice(index, 1);
            this.$message.success({
              message: "删除成功",
            });
          });
        })
        .catch(() => {
          this.$message("您已取消删除");
        });
    },
    // 权限数据
    handleauthorization(index, row) {
      this.id = row.id;
      let _this = this;
      let data = {
        roleId: row.id,
      };
      this.diagrantFormVisible = true;
      handleGrants(data).then((res) => {
        _this.data = res.data.data.systemPermissions;
        _this.assignedPermissions = res.data.data.assignedPermissions;
      });
    },
    // 确定按钮
    getCheckedKeys() {
      this.modifyList = this.$refs.tse.getCheckedKeys(true);
      let data = {
        roleSetPermissionDTO: JSON.stringify({
          roleId: this.id,
          permissions: this.modifyList,
        }),
      };
      getCheckedKeysa(data).then((res) => {
        if (res.data.errmsg == "成功") {
          this.$message.success({
            message: "授权角色成功",
          });
          this.diagrantFormVisible = false;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getlist();
    },
  },
  created() {
    this.getlist();
  },
};
</script>
<style scoped lang="less">
// 根标签
#app {
  height: 100%;
  overflow: hidden !important;
  position: relative;
  padding: 20px;
}
// 输入框&添加&查找的父级标签
.search {
  padding-bottom: 10px;
  text-align: left;
}
// input输入框父级
.SearchInput {
  width: 200px;
  margin-left: 4px;
  margin-bottom: 10px;
  display: inline-block;
  vertical-align: middle;
}
.el-input {
  border-radius: 4px;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  width: 100%;
}
.searchlogo {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-left: 4px;
}
.addlogo {
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
}
.editor {
  background-color: #409eff;
  color: white;
}
.el-dialog__header {
  text-align: left;
}
.DialogInput {
  width: 300px;
}
/deep/ .el-form-item__label {
  text-align: left;
  width: 80px !important;
  margin-left: 40px;
}
.apival {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
  height: 20px;
  padding: 0 5px;
  line-height: 19px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}
.block {
  padding-bottom: 40px;
  padding-top: 20px;
}
.action {
  position: absolute;
  left: 0;
  top: 0;
  right: -17px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 20px;
}
</style>